<template>
  <section class="oa-form__table">
    <h5>{{ approve.name }}</h5>
    <table cellpadding="0" cellspacing="0">
      <tr v-if="$route.query.from != 'new'">
        <td>事务编号</td>
        <td>
          {{ approve.name }}
          <span v-if="approve && approve.code">{{ approve.code }}</span>
        </td>
      </tr>
      <tr>
        <td>流程名称</td>
        <td>
          <span v-if="$route.query.from == 'new'">新建{{ approve.name }}</span>
          <span v-else>
            {{ approve.approve_name }}
          </span>
        </td>
      </tr>
      <tr>
        <td>申请事由</td>
        <td :title="reason"><el-input placeholder="申请事由" type="textarea" v-model="reason" :disabled="$route.query.from != 'new'"/></td>
      </tr>
    </table>
    <h3 class="oa-form__table-title">
      <span v-if="$route.query.from === 'new'">{{ approve.name }}</span>
      <span v-else>
        {{ approve.approve_name }}
      </span>
    </h3>
    <table class="achievement__tab">
      <tr class="border_0">
        <td width="200">考核周期:</td>
        <td width="200">
          <el-date-picker
            value-format="yyyy-MM-dd"
            type="date"
            v-model="applyTime"
            :disabled="$route.query.from !== 'new'"
            placeholder="考核周期">
          </el-date-picker>
        </td>
        <td width="200">部门:</td>
        <td>
          <el-select v-model="department" :disabled="$route.query.from != 'new'" placeholder="请选择">
            <el-option
              v-for="item in departments"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </td>
        <td>姓名:</td>
        <td>
          <el-select v-model="value" style="width:60%" :disabled="$route.query.from != 'new'" placeholder="请选择"  @change="selectStaff($event)">
            <el-option
              v-for="item in staff"
              :key="item.value"
              :label="item.label"
              :value="item">
            </el-option>
          </el-select>
        </td>
        <!-- <td>职位:</td> -->
        <td>职位:</td>
        <td><el-input v-model="gangwei" :disabled="$route.query.from !== 'new'" placeholder="职位"/></td>
        <td></td>
      </tr>
      <tr>
        <td class="_name" colspan="2">KPI</td>
        <td class="_name">指标定义</td>
        <td class="_name">权重</td>
        <td class="_name">数据提供</td>
        <td class="_name">计划完成量</td>
        <td class="_name">实际完成量</td>
        <td class="_name">超额完成量</td>
        <td class="_name">评估得分</td>
        <!-- <td class="_name">扣分事项说明</td> -->
      </tr>
      <tr>
        <td rowspan="5">考核指标</td>
        <td>总成绩(万元)</td>
        <td>当月总销售业绩金额</td>
        <td>60%</td>
        <td>财务部</td>
        <td><el-input v-model="obj.a82" :disabled="obj.a82Flag" placeholder="总业绩计划完成量"/></td>
        <td><el-input v-model="obj.a84" :disabled="obj.a84Flag" placeholder="总业绩实际完成量"/></td>
        <td><el-input v-model="b1" :disabled="obj.b1Flag" placeholder="总业绩超额完成量"/></td>
        <td><el-input v-model="obj.a90" :disabled="obj.a90Flag" placeholder="总业绩评估得分"/></td>
      </tr>
      <tr>
        <td>成交客户</td>
        <td>每月成交4个客户</td>
        <td>10%</td>
        <td>财务部</td>
        <td><el-input v-model="obj.a83" :disabled="obj.a83Flag" placeholder="新客户计划完成量"/></td>
        <td><el-input v-model="obj.a85" :disabled="obj.a85Flag" placeholder="新客户实际完成量"/></td>
        <td><el-input v-model="b2" :disabled="obj.b2Flag" placeholder="新客户超额完成量"/></td>
        <td><el-input v-model="obj.a91" :disabled="obj.a91Flag" placeholder="新客户评估得分"/></td>
      </tr>
      <tr>
        <td>展业</td>
        <td>每月至少拜访25次客户</td>
        <td>10%</td>
        <td>行政部</td>
        <td><el-input v-model="obj.a88" :disabled="obj.a88Flag" placeholder="展业计划完成量"/></td>
        <td><el-input v-model="obj.a89" :disabled="obj.a89Flag" placeholder="展业实际完成量"/></td>
        <td><el-input v-model="b3" :disabled="obj.b3Flag" placeholder="展业超额完成量"/></td>
        <td><el-input v-model="obj.a92" :disabled="obj.a92Flag" placeholder="展业评估得分"/></td>
      </tr>
      <tr>
        <td>销售管理</td>
        <td>部门各项业绩目标完成情况</td>
        <td>10%</td>
        <td>财务部</td>
       <td><el-input v-model="obj.a86" :disabled="obj.a86Flag" placeholder="销售计划完成量"/></td>
        <td><el-input v-model="obj.a87" :disabled="obj.a87Flag" placeholder="销售实际完成量"/></td>
        <td><el-input v-model="b4" :disabled="obj.b4Flag" placeholder="销售超额完成量"/></td>
        <td><el-input v-model="obj.a93" :disabled="obj.a93Flag" placeholder="销售评估得分"/></td>
      </tr>
      <tr>
        <td>遵守公司规章制度</td>
        <td>对公司制度及企业文化的理解和遵守公司规章制度|执行;履行本部门工作中的行为表现</td>
        <td>10%</td>
        <td>直属上级</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td><el-input v-model="obj.a610" :disabled="obj.a610Flag" placeholder="遵守公司规章制度评估得分"/></td>
      </tr>
      <tr>
        <td colspan="2"></td>
        <td colspan="3"></td>
        <td colspan="4">综合考核率:{{myScore}}</td>
      </tr>
      <tr>
        <td colspan="9">
          <p>本人已认真阅读并认可本绩效考核评定表，同意遵循并执行本绩效考核评定表。</p>
          <p>
            1、月度业绩目标根据部门总经理提交的基数，计算方式:每月实际的销售业绩+目标值=X,根据X符合的相对应条件: .
            ①X &lt; 60%，得50%;②60%≤X &lt; 75%,得65%;③75%sX &lt; 90%,得75%; ④X&lt; 90%，得100%
            绩效考核分= (1-扣减分) x权重(60%) 。
          </p>
          <p>2、 新客户开发根据在财务部刘小娇报备数量，计算方式:实际成交客户六目标值*权重(10%)</p>
          <p>3、 行政部根据外勤签到的地址确认展业数，计算方式:每月实际的拜访量+目标值=X, 根据X符合的相对应条件:
            ①X≤60%,扣50%;②60&lt;Xs80,扣30%;③80&lt;X≤90,扣20%;④X&gt;90,扣0</p>
          <p> 4、部门各项业绩目标完成情况:①X&lt;60%， 得50%;②60%sX&lt;75%,得65%; ③75%sX&lt;90%,得75%; ④X&gt;90%,得100% .
            绩效考核分= (1-扣减分) x权重(10%)。</p>
        </td>
      </tr>
    </table>
    <history :process="process"></history>
    <files></files>
  </section>
</template>
<script>
import mixin from '@/mixins/index.js'
import history from '../service/components/process'
import files from '../service/components/files'
import { sum } from '@/utils/domUtils.js'
const obj = {}
for (let i = 78; i <= 93; i++) {
  obj[`a${i}`] = ''
  obj[`a${i}Flag`] = true
}
for (let i = 610; i <= 611; i++) {
  obj[`a${i}`] = ''
  obj[`a${i}Flag`] = true
}
for (let i = 1; i <= 4; i++) {
  obj[`b${i}`] = ''
  obj[`b${i}Flag`] = true
}
export default {
  mixins: [mixin],
  data () {
    return {
      reason: '',
      truename: '',
      department: '',
      flag: false,
      value: '',
      obj: JSON.parse(JSON.stringify(obj)),
      applyTime: '',
      gangwei: '',
      file_paths: [],
      file_names: [],
      field_ids: [],
      field_vals: [],
      autoField: []
    }
  },
  components: { history, files },
  props: ['curDepartment', 'userInfo', 'approve', 'staff', 'addDofield', 'departments', 'process'],
  computed: {
    uploadArr () {
      return this.$store.state.uploadArr
    },
    myScore () {
      const result = [this.obj.a90, this.obj.a91, this.obj.a92, this.obj.a93, this.obj.a610]
      return sum(result)
    },
    b1 () {
      return this.obj.a84 - this.obj.a82
    },
    b2 () {
      return this.obj.a85 - this.obj.a83
    },
    b3 () {
      return this.obj.a89 - this.obj.a88
    },
    b4 () {
      return this.obj.a87 - this.obj.a86
    }
  },
  watch: {
    addDofield () {
      this.addDofieldRender()
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.obj = JSON.parse(JSON.stringify(obj))
      if (this.$route.query.from === 'new') {
        this.disabled = true
      } else {
        this.infoFunc()
      }
      this.addDofieldRender()
    })
  },
  methods: {
  }
}
</script>
